<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
</head>
<body>
    <!-- 
        Vue中使用组件的三大步骤：
        一、定义组件（创建组件）
        二、注册组件
        三、使用组件（写组件标签）

    一、如何定义一个组件？
        使用Vue.extend(options)创建，其中options和new Vue（options）时传入的那个options几乎一样，但也有点区别：
        区别如下：
            1、el不要写，为什么？  最终所有的组件都要经过一个VM的管理，由VM中的el决定服务那个容器。
            2、data必须写成函数，为什么？ 避免组件被复用时，数据存在引用关系。
        备注：使用template可以配置组件结构。

        const school=Vue.extend(options)
        一个简写的形式:const school=options

    二、如何注册组件？
        1、局部注册：靠new Vue的时候转入components选项
        2、全局注册：靠Vue.component('组件名',组件)

    三、编写组件标签
        <school></school>
     -->
    <div id="root">
<!--     <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2> -->
        <school></school>
        <hr>
        <student></student>
        <hello></hello>
<!--      <h2>学生姓名：{{name}}</h2>
        <h2>学生年龄：{{age}}</h2> -->
    </div>
    <div id="root2">
    <hello></hello>
    </div>
    <script>
        Vue.config.productionTip = false;
        //创建school组件：
        // const school=Vue.extend();下面这个简写
        const school={
            template:`<div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
            </div>
            `,
            data(){
                return{
                schoolName:"尚硅谷",
                address:"北京",
                }
            }
        };
        // 创建student组件
        const student=Vue.extend({
            template:`<div>
        <h2>学生姓名：{{studentName}}</h2>
        <h2>学生年龄：{{age}}</h2>
            </div>
            `,
           data(){
            return{
                studentName:'罗雨',
                age:18
            }
           }
        });
        // 进行全局注册组件
        const hello=Vue.extend({
            template:`<div>
                <h2>你好啊！{{name}}</h2>
                </div>`,
            data(){
                return{
                    name:'Tom'
                }
            }
        });
       
        Vue.component('hello',hello);//全局注册组件
        
        // 创建VM
        new Vue({
            el:"#root",
            // 注册组件(局部注册)
            components:{
                school:school,//简写：school
                student:student,//简写：student
            }
        });
        new Vue({
            el:"#root2",
        });
    </script>
</body>
</html>